import { Button, Card } from 'antd'
import './home.styl'
import { useEffect, useState } from 'react';
import AnimatedNumber from '@/components/animatedNumber';
import WithPermission from '@/components/layout/WithPermission';

function Home() {
    // const apiUrl = import.meta.env.VITE_API_URL;
    // console.log(apiUrl);
    const [count, setCount] = useState(0)

    useEffect(() => {
        setTimeout(() => {
            setCount(8993.33)
        }, 1000)
    }, [])

    return (
        <>
            <section className="H-main P-home">
                <Card title="主题换肤说明">
                    <p>
                        1. 管理后台中，每一个面板模块，使用Antd的&lt;Card
                        /&gt;组件进行作为最外层，以便适用主题换肤。
                    </p>
                    <p>
                        2.
                        任何自行写的样式颜色，都不会换肤。如需换肤，使用Antd的useToken获取当前主题token中对应的颜色值进行换肤。
                    </p>
                </Card>
                <div style={{fontSize: '20px'}}>
                    <AnimatedNumber 
                        value={count} 
                        duration={2000} 
                        // formatter={(val) => Number(formatNumberWithCommas(val)).toFixed(2)} 
                    />
                    <WithPermission requiredPermission="submitBtn">
                        <Button>点击</Button>
                    </WithPermission>
                </div>
            </section>
        </>
    )
}

export default Home